
<template>
  <!-- 主面板 -->
  <div class="content">
    <header class="header">
      <img src="@/assets/images/content/logo.png" alt class="logo" />

      <div class="info">
        <el-popover placement="bottom" v-model="visible" class="avatar_box">
          <p>这是一段内容这是一段内容确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
          </div>
          <img src="@/assets/user/user.png" slot="reference" class="avatar" />
        </el-popover>
        <span class="logout" @click="logout">退出登陆</span>
      </div>
    </header>
    <main class="main">
      <aside class="aside" v-if="show_menu">
        <!-- 递归菜单 -->
        <div class="menu">
          <el-menu :default-active="activeIndex" text-color="#ffffff">
            <template v-for="(item,index) in routes">
              <SiderbarItem :item="item" :index="''+index" :key="item.path"/>
            </template>
          </el-menu>
        </div>
      </aside>
      <section class="section">
        <router-view />
      </section>
    </main>
  </div>
</template>

<script>
import SiderbarItem from "@/components/LayOut/SidebarItem";
import { getStorage, removeToken } from "../utils/cookie";
export default {
  data() {
    return {
      title_name: "平台总览",
      show_menu: true,
      visible: false
    };
  },
  components: {
    SiderbarItem
  },
  computed: {
    // 使用cookie记录当前路由 防止刷新菜单跟页面不匹配
    activeIndex() {
      const cIndex = getStorage("activeIndex");
      if (cIndex) return cIndex;
      else return "0";
    },
    username() {
      return getStorage("username");
    },
    routes() {
      let routes = this.$router.options.routes;
      routes = routes.filter(item => !item.hideInMenu);
      return routes;
    }
  },
  watch: {
    $route() {
      this.setTitle();
    }
  },
  methods: {
    //登出
    logout() {
      this.$confirm("此操作将登出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          removeToken(() => {
            this.$router.push({ path: "/login" });
            this.$message({
              type: "info",
              message: "您已成功登出"
            });
          });
        })
        .catch(() => {
          console.log("取消登出");
        });
    },
    //设置标题
    setTitle() {
      let name = getStorage("title_name");
      if (name) {
        this.title_name = name;
      } else {
        this.title_name = "平台总览";
      }
    },

  },
  mounted() {
    this.setTitle();
  }
};
</script>

<style lang="less" scoped>
.avatar_box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  width: 38px;
  height: 38px;
  margin-right: 20px;
}
.content {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 992px;
  min-height: 800px;
}
.header {
  height: 60px;
  width: 100%;
  min-width: 992px;
  display: flex;
  align-items: center;
  padding-right: 20px;
  background: #001529;
  .logo {
    margin-right: auto;
    margin-left: 20px;
  }
  .info {
    color: #fff;
    margin-left: auto;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .welcome {
      margin-right: 20px;
      color: rgb(85, 221, 255);
      font-size: 18px;
    }
  }
}
.main {
  width: 100%;
  display: flex;
  height: 100%;
  margin-top: 1px;
}
.aside {
  min-width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  /deep/.menu {
    .el-menu {
      background-color: inherit !important;
    }
    .el-menu-item:focus,
    .el-menu-item:hover {
      outline: 0;
      background-color: #1890FF;
    }
    .el-submenu__title:hover {
      background-color: #1890FF;
    }
    .el-menu-item.is-active {
      background-color: #1890FF;
      color: #fff;
    }
    flex: 1;
    width: 100%;
    background: #000C17;
    padding-bottom: 40px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
.section {
  margin:0 2px;
  background-color: #f5f5f5;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.devide {
  height: 10px;
  width: 2px;
  background-color: #fff;
  margin: 0 12px;
}

.el-menu {
  border-right: 0;
}
.el-icon-menu {
  cursor: pointer;
  &:hover {
    color: #3963bc;
  }
}
</style>

